<!DOCTYPE html>

<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">

</head>

<body>

    <header>
        <h1>Bootstrap练习</h1>

    </header>
    <main>
        <section>

            <h2>Container</h2>
            <div class="container" style="background-color: cornflowerblue;">
                容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时，容器是必需的。容器用于在其中容纳，填充和（有时）使内容居中。
                尽管可以嵌套容器，但是大多数布局不需要嵌套容器。
            </div>

            <div class="container-fluid" style="background-color: cornflowerblue;">
                <p>Bootstrap带有三个不同的容器:</p>
                <p>.container，它max-width在每个响应断点处设置一个</p>
                <p>.container-fluid，这是width: 100%所有断点</p>
                <p>.container-{breakpoint}，width: 100%直到指定的断点为止</p>
            </div>
        </section>

        <section>

            <h2>Grid system</h2>

            <div class="section" style="background-color: brown;">

                <div class="container">

                    <div class="row my-3">
                        <div class="col-1">01</div>

                        <div class="col-2">02</div>

                        <div class="col-6">03</div>

                        <div class="col-3">04</div>

                        <div class="col">05</div>

                        <div class="col">06</div>

                        <div class="col">07</div>

                        <div class="col">08</div>

                        <div class="col">09</div>

                        <div class="col">10</div>

                        <div class="col">11</div>

                        <div class="col">12</div>

                        <div class="col">13</div>

                        <div class="container">
                            <div class="row my-3">

                                <div class="col-sm"></div>

                                <div class="col-sm"></div>

                                <div class="col-sm"></div>


                                <section>

                                    <div class="container">

                                        <div class="row justify-content-center my-3">

                                            <div class="col-8"></div>

                                </section>

                                <section>

                                    <div class="container">

                                        <div class="row offset-md-2">

                                            <div class="col-8">

                                            </div>

                                </section>

        </section>

        <section>

            <div class="container">

                <div class="row justify-content-center">
                    <div class="col-md-8">

                        <div class="container">

                            <div class="row justify-content-center my-3">

                                <div class="col-8">

                                </div>

                            </div>

                        </div>

        </section>

        <section>

            <h2>响应式图片</h2>

            <div class="container">

                <div class="row">

                    <div class="col-8">
                        <img src="" alt="bing" class="img-fluid"></div>

        </section>

    </main>

    <footer></footer>

</body>

</html>